/*
 * @Author: wangguanqing 
 * @Date: 2018-05-09 16:01:39 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-05-09 16:02:45
 */

<template>
	<div v-if="isShow" class='chart-container'>
		<el-row :gutter="20" style="padding-right: 8px;">
			<el-col class="tableChartText" :xs="24" :sm="24" :md="24" :lg="5">
				<div style="width: 100%; height: 26.875rem;text-align: center;padding-bottom: 10px;border:0;box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);">
				<img id="ImgLogo" v-if="isImg" :src="tablel.img" alt="" />		
				<img id="ImgLogo" v-else src="static/img/errImg.png" alt="" />		
			   <p style="margin-bottom: 1.875rem;"> 
						<b>{{tablel ? tablel.indexName :''}}</b>					
					</p>
					<div class="bg-1">
						<div>
							<p>本月目标 : {{table.monethTarget}}</p>
							<p>本月完成 : {{table.monethOk}}</p>
							<p>月完成率 : {{table.monethNum}}</p>
						</div>
					</div>
					<div v-if="week != ''" class="bg-2">
						<div>
							<p>当周计划 : {{table.lastWeek}}</p>
							<p>当周完成 : {{table.laskOk}}</p>
							<p>周完成率 : {{table.laskNum}}</p>
						</div>
					</div>
					<div class="bg-3">
						<div>
							<p v-if="week === '4' ">下月计划 : {{table.thisPlan}}</p>
							<p v-if=" week === ''">本月第一周计划 : {{table.thisPlan}}</p>							
							<p v-if="week != ''&& week != '4'">下周计划 : {{table.thisPlan}}</p>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="19" style="border: 0;box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);padding-bottom: 10px;">
				<div :id="cid" class="barCharts"></div>
			</el-col>
		</el-row>
	</div>
	<div v-else class='chart-container'>
		<el-row :gutter="20" style="padding:10px 8px 10px 0;text-align: center;">
			<span class="el-table__empty-text" style="font-size:1.1rem">暂无数据</span>
		</el-row>
	</div>
</template>
<style>
.barCharts {
  min-width: 18.75rem;
  min-height: 26.875rem;
}
</style>
<script>
import echarts from "echarts";
export default {
  props: ["option", "cid", "tablel", "week"],
  data() {
    return {
      myChart1: null,
      table: {},
      isShow: true,
      isImg: false,
      noNum: "--" // 没有数字时的表示
    };
  },
  computed: {},
  methods: {
    init() {
      window.addEventListener(
        "resize",
        function() {
          this.myChart1.resize();
        }.bind(this)
      );
    },
    onClick(Bool) {
      if (this.myChart1) {
        this.myChart1.clear();
        this.myChart1.dispose();
      }
      var self = this;
      this.isShow = Bool;
      setTimeout(function() {
        self.myChart1 = echarts.init(document.getElementById(self.cid));
        self.myChart1.setOption(self.option);
        self.init();
      }, 100);
      // this.$nextTick(() => {
      var table = {};
      // if(!this.tabel.img) return
      document.getElementById("ImgLogo").src = this.tablel.img;
      this.isImg = true;
      if (this.tablel) {
        var unit = this.tablel.unit;
        var monethTarget = String(
          this.$utils.numForUnit(this.tablel.thisMonthExpected, unit)
        );
        table.monethTarget =
          monethTarget !== "" ? monethTarget + unit : this.noNum + unit;
        var monethOk = String(
          this.$utils.numForUnit(this.tablel.thisMonthOk, unit)
        );
        table.monethOk = monethOk !== "" ? monethOk + unit : this.noNum + unit;
        var lastWeek = String(
          this.$utils.numForUnit(this.tablel.lastWeekExpected, unit)
        );
        table.lastWeek = lastWeek !== "" ? lastWeek + unit : this.noNum + unit;

        var laskOk = String(
          this.$utils.numForUnit(this.tablel.lastWeekTotal, unit)
        );
        table.laskOk = laskOk !== "" ? laskOk + unit : this.noNum + unit;

        var thisPlan = String(
          this.$utils.numForUnit(this.tablel.thisWeekExpected, unit)
        );
        table.thisPlan = thisPlan !== "" ? thisPlan + unit : this.noNum + unit;

        if (
          monethOk !== "" &&
          Number(monethOk) !== 0 &&
          this.tablel.monethTarget !== "" &&
          Number(monethTarget) !== 0
        ) {
          table.monethNum =
            Number(monethOk / monethTarget * 100).toFixed(2) + "%";
        } else {
          table.monethNum = this.noNum + "%";
        }
        if (
          laskOk !== "" &&
          Number(laskOk) !== 0 &&
          lastWeek !== "" &&
          Number(lastWeek) !== 0
        ) {
          table.laskNum =
            Number(Number(laskOk) / Number(lastWeek) * 100).toFixed(2) + "%";
        } else if (Number(laskOk) === 0) {
          table.laskNum = "0%";
        } else {
          table.laskNum = this.noNum + "%";
        }
        this.table = table;
      }
    }
  }
};
</script>